<template>
	<view>
		<scroll-view :scroll-x="true">
			<view class="date_list"
				:style="'background-color:' + (dark?'#272f30':'white') + ';padding-top:' + (dark ? '22rpx' : '0rpx') + ';padding-bottom:' + (dark ? '8rpx' : '0rpx') + ';'">
				<view v-for="(item, index) in date_list" :key="index"
					:class="'weekDate ' + (item.value === selected_date.value? 'current': 'normal')" @tap="switchDay"
					:data-currentDay="item">
					<view class="weekText" :style="'color:' + (dark?'white':'#272f30') + ';'">{{item.weekText}}</view>
					<view class="dayText" :style="'color:' + (dark?'white':'#272f30')">{{item.dayText}}</view>
					<!-- 选中的日期 -->
					<view style="height: 6rpx;width: 6rpx;background-color: #00C2C4;" class="circle" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// component/weekday.js


	const moment = require("../utils/moment.js");
	const dayToWeekDayMapping = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
	const weekDayEnglish = ["January", "February", "March", "April", "May", "June", "July", "August", "September",
		"October", "November", "December"
	]; // const weekDayEnglish = [

	export default {
		name: "weekday2",
		data() {
			return {
				date_list: [],
				selected_date: null,
				monthText: null,
				monthEnglish: null
			};
		},

		components: {},
		props: {
			selectedDay: Object,
		},
		beforeMount: function() {
			this.loadDateList();
		},
		methods: {
			test() {
				console.log("test")
			},
			getSelectedDate() {
				return this.selected_date;
			},
			set_index: function() {
				console.log(this.date_list[1]);
				this.selected_date = this.date_list[1]
			},
			loadDateList: function() {
				let date_list = [];
				var monthText;
				var monthEnglish;

				for (var i = 0; i <= 15; i++) {
					var currentTime = moment().add(i, 'days');
					var label = currentTime.format("YYYY-MM-DD");
					var value = moment(label)
						.valueOf(); // var text = (i == 0 ? moment().format("今 M.D") : dayToWeekDayMapping[currentTime.format("d")]);

					var weekText = dayToWeekDayMapping[currentTime.format("d")]; //周几
					if (i == 0) {
						weekText = '今天'
					}
					var dayText = currentTime.format("D"); //日期 日

					if (i == 0) {
						monthText = currentTime.format("M"); //日期 月

						monthEnglish = weekDayEnglish[currentTime.format("M") - 1];
					}

					date_list.push({
						index: 0,
						// text: text,
						weekText: weekText,
						dayText: dayText,
						value: value,
						label: label
					});
				}

				let selected_date = date_list[0];
				const {
					selectedDay
				} = this;

				if (selectedDay) {
					selected_date = selectedDay;
				}

				this.date_list = date_list,
					this.selected_date = selected_date,
					this.monthText = monthText,
					this.monthEnglish = monthEnglish
			},
			switchDay: function(e) {
				console.log(e.currentTarget.dataset.currentday)
				this.selected_date = e.currentTarget.dataset.currentday

				this.$emit('weekdaychange', {
					detail: {
						date: e.currentTarget.dataset.currentday
					}
				});
			}
		}
	};
</script>
<style>
	.weekDayClass {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		padding: 0rpx 28rpx 22rpx 28rpx;
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px 0 rgba(212, 212, 212, 0.8);
	}

	.date_list {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
	}
	
	
	.date_list .weekDate {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 0 22rpx 0 22rpx;
	}
	/* 选中 */
	.date_list .current {
		background-color: black;
		color: #FFF;
		border-radius: 6rpx;
	}

	.date_list .current .weekText {
		font-size: 24rpx;
		color: #101010;
		font-weight: bold;
	}

	.date_list .current .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #272F30;
		font-size: 24rpx;

		font-weight: bold;
	}
	/* 未选中 */
	.date_list .normal .weekText {
		color: #101010;
		font-size: 24rpx;
	}

	.date_list .normal .dayText {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #9E9E9E;
		font-size: 24rpx;
	}

	.date_list .current .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #2EC3B1;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.date_list .normal .indicator {
		width: 52rpx;
		height: 4rpx;
		background-color: #fff;
	}
</style>
